<template>
    <div class="allbuju">
        <div id="top">
            <!--左-->
            <div class="topleft" @click="tiaozhuan"> 
                <!-- 以下语句是为了使用有色图标 -->
                <el-icon style="margin-left:10px;"><CloseBold /></el-icon>
            </div>
            <div class="topContent">
                <span>账单详情</span>
            </div>
            <div class="topright"> 
                <el-icon style="margin-right:10px;"><MoreFilled /></el-icon>
            </div>
        </div>
        <div id="content">
            <span class="name1">全金大厦2栋104</span>
            <div class="content1">
                <span>2022年12月账单</span><br/>
                <span>总金额</span>
                <span class="g1">0.20元</span><br/>
                <span>已支付</span>
                <span class="g1">{{ Property0 }}</span><br/>
                <span>截止日期</span>
                <span class="g1">2022年-12月-30日</span>
            </div>
            <div class="content2">
                <span>清洁费</span>
                <span class="g1">{{ Property1 }}</span>
                <br/><hr/>
                <span>电梯费</span>
                <span class="g1">{{ Property2 }}</span>
            </div>
            <span style="color:white; margin-left:30px;">请选择支付方式：</span>
            <el-select v-model="value" placeholder="请选择" style="margin-top: 10px;margin-left: 10px;width: 150px;">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <button @click="buttonClicked">缴纳</button>
        </div>   
    </div>
</template>

<script>
import {CloseBold} from '@element-plus/icons'
import {MoreFilled} from '@element-plus/icons'
export default{
    name:"bianming",
    data() {
      return {
        Property0: '0.00元',
        Property1: '0.10元',
        Property2: '0.10元',
        options: [{
          value: '选项1',
          label: '微信支付'
        }, {
          value: '选项2',
          label: '支付宝'
        }, {
          value: '选项3',
          label: '银行卡'
        }, {
          value: '选项4',
          label: '信用卡'
        }],
        value: ''
      }
    },
    components: {
        CloseBold,
        MoreFilled
    },
    methods:{
        //跳转到全部功能页面
        tiaozhuan:function(){
            this.$router.replace('/PaymentOnline')
        },  
        buttonClicked(){
            const newText0 = '0.00元';
            const newText = '0.00元';
            const newText1 = '0.20元';
            this.Property0 = newText1;
            this.Property1 = newText;
            this.Property2 = newText0;
        }          
    }
}
</script>
<style lang="less" scoped>
#top{
        width: 100%;
        height: 50px;
        //弹性布局！！！！！
        display: flex;                 ///！！！！！！
        justify-content: space-between; ///！！！！！！
        align-items: center;//垂直居中
}
.name1{
    margin-left: 30px;
    color: white;
}
#content{
   width: 100%;
   background-color: deepskyblue;
   height: 795px;
   padding-top: 20px;
}
.content1{
    height: 110px;
    margin-top: 5px;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    padding-left: 22px;
    padding-right: 22px;
    background-color: white;
    color: black;
}
.content2{
    height: 100px;
    margin-top: 30px;
    margin-left: 30px;
    margin-right: 30px;
    padding-top: 20px;
    padding-left: 22px;
    padding-right: 22px;
    background-color: white;
    color: black;
    margin-bottom: 10px;
}
.g1{
    float: right;
}
hr{
    margin-top: 15px;
    margin-bottom: 15px;
}
button{
    width: 100px;
    height: 35px;
    margin-left: 30%;
    margin-top: 30px;
    border: 1px solid white;
    background-color: white;
    color: deepskyblue;
    border-radius: 8px;
}
</style>